<script setup lang="ts">
import {
  menuBgImg,
  menuActiveImg,
  menu1_1Img,
  menu2_1Img,
  menu3_1Img,
  menu4_1Img,
  menu5_1Img,
  menu6_1Img,
  menu1_2Img,
  menu2_2Img,
  menu3_2Img,
  menu4_2Img,
  menu5_2Img,
  menu6_2Img,
  pointImg,
} from '@/assets/images/menu';
import { ref } from 'vue'
const menuList = ref([
  {
    menuActive: true,
    menuImg: menu1_1Img,
    activatedMenuImg: menu1_2Img,
    menuTitle: '首页'
  },
  {
    menuActive: false,
    menuImg: menu2_1Img,
    activatedMenuImg: menu2_2Img,
    menuTitle: '器者介绍'
  },
  {
    menuActive: false,
    menuImg: menu3_1Img,
    activatedMenuImg: menu3_2Img,
    menuTitle: '游戏特色'
  },
  {
    menuActive: false,
    menuImg: menu4_1Img,
    activatedMenuImg: menu4_2Img,
    menuTitle: '我们在行动'
  },
  {
    menuActive: false,
    menuImg: menu5_1Img,
    activatedMenuImg: menu5_2Img,
    menuTitle: '世界观'
  },
  {
    menuActive: false,
    menuImg: menu6_1Img,
    activatedMenuImg: menu6_2Img,
    menuTitle: '资料'
  }
])
const clickmenu = (index: number) => {
  menuList.value.forEach(item => item.menuActive = false);
  menuList.value[index].menuActive = true;
}
</script>
<template>
  <div class="float-vertical-center">
    <img :src="menuBgImg" width="100px" class="menu-bg-img">
    <div class="white-color float-center menu-container">
      <div class="point-img-container">
        <img :src="pointImg" width="50px" class="point-img">
      </div>
      <div class="menu-item-container">
        <div class="menu-item" v-for="(menu, index) in menuList" :key="index" @click="clickmenu(index)">
          <img v-if="menu.menuActive" :src="menuActiveImg" class="float-horizontal-center menu-item-img" />
          <div class="menu-img-container" :style="{ height: menu.menuActive ? '50px' : '25px' }">
            <img :src="menu.menuActive ? menu.activatedMenuImg : menu.menuImg" class="menu-img">
          </div>
          <div class="menu-title" :style="{ color: menu.menuActive ? '' : '#14362a' }">{{ menu.menuTitle }}</div>
        </div>
      </div>
      <div class="point-img-container">
        <img :src="pointImg" width="50px" class="point-img point-bottom">
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.menu-bg-img {
  z-index: 1;
  height: 400px;
}

.menu-container {
  z-index: 2;

  .point-img-container {
    display: flex;
    justify-content: center;

    .point-img {
      z-index: 2;
      margin: 5px;
      cursor: pointer;
    }

    .point-bottom {
      transform: rotate(180deg);
    }
  }

  .menu-item-container {
    background: hsla(40, 34%, 77%, .94);

    .menu-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;

      .menu-item-img {
        z-index: 3;
        height: 70px;
      }

      .menu-img-container {
        overflow: hidden;
        z-index: 4;
        position: relative;

        .menu-img {
          width: 50px;
          height: 50px;
        }
      }

      .menu-title {
        text-align: center;
        font-size: small;
        width: 70px;
        height: 20px;
        z-index: 4;
        position: relative;
      }
    }
  }

}
</style>
